<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/" />
    <meta charset="utf-8" />
    <title>bit Bswup Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <style>
        #bit-bswup {
            position: fixed;
            background: #fff;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            padding: 20px;
            text-align: center;
            display: none;
            font-family: Arial, Helvetica, sans-serif;
        }

        .bit-bswup-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70%;
            margin: 0 auto;
            margin-top: 45px;
        }

        .bit-bswup-title,
        #bit-bswup-percent {
            font-size: 20px;
        }

        #bit-bswup-description {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .bit-bswup-progress {
            border: 1px solid #ebebff;
            background-color: #eee;
            border-radius: 4px;
            width: 100%;
            height: 5px;
        }

        #bit-bswup-progress-bar {
            background-color: #538fc3;
            border-radius: 2px;
            height: 5px;
        }

        #bit-bswup-reload {
            display: none;
            position: fixed;
            top: 10px;
            right: 10px;
        }

        #bit-bswup-assets {
            font-size: 10px;
            overflow: auto;
            height: 666px;
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="bit-bswup">
        <div class="bit-bswup-container">
            <p class="bit-bswup-title">New version is available</p>
            <p id="bit-bswup-description">Downloading updates, please wait...</p>
            <div class="bit-bswup-progress">
                <div id="bit-bswup-progress-bar" style="width: 0%"></div>
            </div>
            <p id="bit-bswup-percent">0 %</p>
            <ul id="bit-bswup-assets"></ul>
        </div>
    </div>
    <button id="bit-bswup-reload">Update ready, Click to reload!</button>

    <div id="app">Loading...</div>

    <script>
        const appEl = document.getElementById('app');
        const bswupEl = document.getElementById('bit-bswup');
        const descriptionLabel = document.getElementById('bit-bswup-description');
        const progressBar = document.getElementById('bit-bswup-progress-bar');
        const percentLabel = document.getElementById('bit-bswup-percent');
        const reloadButton = document.getElementById('bit-bswup-reload');
        const assetsUl = document.getElementById('bit-bswup-assets');

        function bitBswupHandler(type, data) {
            switch (type) {

                case BswupMessage.updateFound: return console.log('an update found.');

                case BswupMessage.stateChanged: return console.log('state has changed to:', data.currentTarget.state);

                case BswupMessage.activate: return console.log('new version activated:', data.version);

                case BswupMessage.downloadStarted:
                    appEl.style.display = 'none';
                    bswupEl.style.display = 'block';
                    return console.log('downloading assets started:', data?.version);

                case BswupMessage.downloadProgress:
                    const li = document.createElement('li');
                    li.innerHTML = `${data.index}: <b>${data.asset.url}</b>: ${data.asset.hash}`
                    assetsUl.prepend(li);
                    const percent = Math.round(data.percent);
                    progressBar.style.width = `${percent}%`;
                    percentLabel.innerHTML = `${percent} %`;
                    return console.log('asset downloaded:', data);

                case BswupMessage.downloadFinished:
                    if (data.firstInstall) {
                        descriptionLabel.textContent = 'Downloading finished, starting Blazor...';
                        data.reload().then(() => {
                            appEl.style.display = 'block';
                            bswupEl.style.display = 'none';
                        });
                    } else {
                        descriptionLabel.textContent = 'Downloading finished, ready to reload.';
                        reloadButton.style.display = 'block';
                        reloadButton.onclick = data.reload;
                    }
                    return console.log('downloading assets finished.');

                case BswupMessage.updateReady:
                    reloadButton.style.display = 'block';
                    reloadButton.onclick = data.reload;
                    return console.log('new update ready.');
            }
        }
    </script>
    <script src="_framework/blazor.webassembly.js" autostart=false></script>
    <script src="_content/Bit.Bswup/bit-bswup.js"
            scope="/"
            log="none"
            sw="service-worker.js"
            handler="bitBswupHandler"
            blazorScript="_framework/blazor.webassembly.js"></script>
</body>

</html>
